{% extends 'base.html' %}
{% from "_formhelpers.html" import render_field %}

{% block title %}Wunjo{% endblock %}

{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/awesomplete.min.css') }}">
<script src="{{ url_for('static', filename='basic/js/awesomplete.min.js') }}"></script>
{% endblock %}

{% block body %}
<div class="modal-root">
    <div class="fixed backdrop-blur-xl top-0 left-0 w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40 h-screen">
        <div class="flex flex-col p-5 rounded-[.625rem] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-full max-w-sm transition-all max-h-full bg-dark-pop-up">
            <h2 class="text-[1.25rem] leading-6 tracking-[0.0125rem] font-extra-thick font-alumni h2-alumni">{{ _('Welcome') }}!</h2>
            <p class="message mt-3 text-m-mobile lg:text-m">{{ _('Loading the necessary modules may take a few moments. Please wait while everything is being set up.') }}</p>
            <p class="hidden system-message mt-3 flex gap-2.5 text-m-mobile md:tex-m p-2.5 bg-accent-primary bg-opacity-30 rounded-md">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" stroke="#fff" fill="#fff" class="shrink-0"><g clip-path="url(#a)"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.6" stroke-width="1.5" d="M10 6.666V10m0 3.333h.008M18.333 10a8.333 8.333 0 1 0-16.667 0 8.333 8.333 0 0 0 16.667 0Z"></path></g><defs><clipPath id="a"><path stroke="none" d="M0 0h20v20H0z"></path></clipPath></defs></svg>
                <span><b>{{ _('NOTE') }}:</b> {{ _('To ensure proper startup, run the application as') }} <b>{{ _('Administrator') }}</b>.</span>
            </p>
            <div class="load flex flex-col gap-3 mt-3">
                <div class="flex items-center gap-2 p-2.5 relative w-full h-10 bg-dark-elements rounded-[.625rem] overflow-hidden">
                    <div class="absolute w-full h-full left-0 top-0 bg-gradient-to-r from-[rgba(255,237,210,0.20)] to-accent-primary opacity-10" style="background: linear-gradient(to right, rgba(255, 237, 210, 0.2), rgb(255, 237, 210));"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="animate-loadingRing mx-auto stroke-accent-primary"><path d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                    <p style="text-wrap: nowrap;" class="text-m-mobile md:text-m grow">{{ _('System is preparing') }}...</p>
                    <div class="absolute h-full w-full left-0 top-0 animate-loadingStripe" style="background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 16px, rgba(0, 0, 0, 0.08) 16px, rgba(0, 0, 0, 0.08) 32px) 0% 0% / 200% 200%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<body class="bg-dark-background min-h-screen font-sans text-regular-mobile lg:text-regular lg:w-[calc(100%-var(--scrollbar-thickness)] pt-[var(--navbar-top-mobile)] md:pt-[var(--navbar-top)] transition-[padding-top]">
    <div style="z-index:99999" class="ml-3 invert-on-touchscreen absolute top-2 left-2 font-normal gap-0 flex items-center justify-center">
        <input style="color: #ffffff;background: #221d21" class="w-24 translation-input text-center disabled:cursor-not-allowed rounded-lg transition-colors px-3 py-2.5 !font-bold text-m-mobile lg:text-m uppercase" value="{% if get_locale() == 'ru' %}Русский{% elif get_locale() == 'zh' %}中文{% elif get_locale() == 'ko' %}한국어{% elif get_locale() == 'es' %}Español{% else %}English{% endif %}">
    </div>
    <main class="flex items-center">
        <div class="flex-1 flex max-lg:flex-col-reverse w-full lg:h-screen">
            <div class="hidden-on-touchscreen flex flex-col items-center gap-8 basis-7/12 lg:h-full px-6 lg:px-14 xl:px-16 py-14 bg-accent-primary justify-center">
                <div class="flex flex-col flex-1"></div>
                <div class="flex flex-col flex-1 justify-center gap-8 items-center">
                    <a>
                        <div class="cursor-pointer px-1.5 font-extrabold font-alumni text-black text-heading-1-mobile lg:text-heading-1">Wunjo</div>
                    </a>
                    <div class="relative">
                        <video style="box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;" class="rounded-[10px] w-auto max-h-[360px] h-auto object-cover" autoplay="" loop="" muted="" poster="" playsinline=""></video>
                    </div>
                    <p class="text-subtitle-mobile lg:text-subtitle text-center mx-auto text-dark-background">{{ _('New features alert! Soon!') }}</p>
                </div>
                <div class="flex flex-col justify-end flex-1">
                    <p class="text-s-mobile lg:text-s text-center mx-auto text-dark-background mt-auto">{{ _('To learn more project, check out') }} <!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/playlist?list=PLJG0sD6007zFJyV78mkU-KW2UxbirgTGr">{{ _('YouTube channel') }}</a>.
                        <br>{{ _('We’re') }}<!-- -->
                        <a class="underline" target="_blank" rel="noopener noreferrer" href="https://boosty.to/wunjo">{{ _('looking') }}</a> <!-- -->
                        {{ _('for different support!') }}
                    </p>
                </div>
            </div>
            <div class="min-h-screen flex flex-col justify-start items-center max-lg:justify-center xl:px-20 lg:px-14 py-6 lg:py-8 max-lg:px-4 flex-1">
                <div class="flex flex-col flex-1"></div>
                <div class="fixed top-0 left-0 right-0 bottom-0 view-dark-background opacity-[.85]" style="z-index:-1;"></div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start max-lg:py-32">
                    <div class="flex-1 flex flex-col w-full justify-center gap-7 max-w-xs text-white">
                        <input type="hidden" name="$ACTION_ID_">
                        <div class="flex flex-col gap-2.5">
                            <h1 class="text-heading-1-mobile lg:text-heading-1 uppercase text-accent-primary !font-[1000] font-alumni">{{ _('Ready to use Wunjo v2?') }}</h1>
                            <p class="text-subtitle-mobile lg:text-subtitle">{{ _('Not found large packages') }}</p>
                        </div>
                        <div class="flex flex-col gap-5">
                            <button class="rounded-md flex items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-4 gap-2 py-2.5 flex items-center justify-center gap-2 !bg-white hover:!bg-accent-hover hover:bg-accent-hover text-dark-background bg-accent-primary">
                                <svg fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.986 9.74a3.193 3.193 0 0 0-.008-.088A5.003 5.003 0 0 0 17 5H7a4.97 4.97 0 0 0-4.987 4.737c-.01.079-.013.161-.013.253v6.51c0 .925.373 1.828 1.022 2.476A3.524 3.524 0 0 0 5.5 20c1.8 0 2.504-1 3.5-3 .146-.292.992-2 3-2 1.996 0 2.853 1.707 3 2 1.004 2 1.7 3 3.5 3 .925 0 1.828-.373 2.476-1.022A3.524 3.524 0 0 0 22 16.5V10c0-.095-.004-.18-.014-.26zM7 12.031a2 2 0 1 1-.001-3.999A2 2 0 0 1 7 12.031zm10-5a1 1 0 1 1 0 2 1 1 0 1 1 0-2zm-2 4a1 1 0 1 1 0-2 1 1 0 1 1 0 2zm2 2a1 1 0 1 1 0-2 1 1 0 1 1 0 2zm2-2a1 1 0 1 1 0-2 1 1 0 1 1 0 2z"></path></svg>
                                <span class="text-dark-background text-m-mobile lg:text-m font-extra-thick">{{ _('Preload') }}</span>
                            </button>
                        </div>
                        <p class="text-s text-light-secondary">{{ _('By signing in, you are agreeing to the') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/eula">{{ _('End-User License Agreement') }}</a>
                            <!-- -->{{ _('and') }}<!-- -->
                            <a target="_blank" rel="noopener noreferrer" class="underline" href="{{ host }}/privacy-policy">{{ _('Privacy Policy') }}</a>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col justify-center flex-1 lg:w-full lg:items-start">
                    <div class="flex items-center gap-5 text-s-mobile lg:text-s text-light-secondary font-light mt-auto">
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://github.com/wladradchenko">GitHub</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://t.me/wladblog">Telegram</a>
                        <a target="_blank" rel="noopener noreferrer" class="underline" href="https://wladradchenko.ru">{{ _('Author') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        const isAdminBool = {{ is_admin|tojson|safe }};
        // Get element for win32
        const systemMessage = document.querySelector(".system-message");
        // Update the message based on conditions
        if (isAdminBool !== true) {
            // Show the system message
            systemMessage.classList.remove('hidden');
        };
    </script>

    <script src="{{ url_for('static', filename='basic/js/translation.min.js') }}" async></script>
    <script>
        window.addEventListener('load', function() {
            initTranslationInputLogical();
        });
    </script>

    <script defer>
        function checkImportStatus() {
            fetch('/inspect-import')
                .then(response => response.json())
                .then(data => {
                    if (data.imports_finished) {
                        window.location.reload();  // Redirect to the login page
                    } else {
                        setTimeout(checkImportStatus, 5000);  // Check again after 5 seconds
                    }
                })
                .catch(error => console.error('Some error:', error));
        }

        // Start checking immediately after the page loads
        checkImportStatus();
    </script>
</body>
{% endblock %}
